<template>
  <div style="height: 100vh;overflow-x: hidden;" class="wrapper">
      <!-- 回到顶部 -->
      <el-backtop target=".wrapper">
        <i class="el-icon-caret-top"></i>
      </el-backtop>
      <Head aIndex="2"></Head>
        
        <div style="min-height:80vh;" >
            <div v-model="blogData" class="grid-content content bg-purple blog_bg " v-loading="loading">
                
                <el-row :gutter="20">
                    <el-col :span="12"><div style="margin: 15px 0px 15px 20px;color: blueviolet;font-size:20px;">分类</div></el-col>
                    <el-col :span="12"><div style="float: right;margin: 10px 20px 0px 0px;font-size:20px;">共
                        <span style="font-size: 28px;color: rgb(6, 154, 240);">{{types.length}}</span> 个分类</div></el-col>
                  </el-row>
                  
                  <div style="background-color: #DCDFE6;height: 1px;margin: 5px 0;"></div>
                    <span  v-for="(type,indexType) in types" :key="indexType" >
                        <el-button v-if="type.id > 0" style="margin: 1% 0 1% 2%;" type="success" plain
                          @click="getType(type.id)">{{type.name}} </el-button>
                    </span>

                 <!-- 分割线 -->
                 <div  style="height:3px; margin: 5px 0; border:none; border-top:3px solid  #1eb9e0;"></div>

              <!-- 文章 -->
              <div>
                <div style=" width: 95%; margin: 2%;" v-for="(item,indexblogData) in blogData" :key="indexblogData" >

<!--                <router-link :to="'/blog/'+item.id">-->
                <div @click="goToBlog(item.id)">
                 <el-card shadow="hover" :body-style="{ padding: '15px' }" >
                   <el-row :gutter="20">
                     <el-col :span="17">
                       <div>
                          <h4>{{item.title}}</h4>
                          <p style="font-size: 17px;">{{item.description}}</p>

                          <div v-lazy-container="{ selector: 'img' }">
<!--                           <el-avatar style="vertical-align:middle" :src="item.tuser.avatar"></el-avatar>-->
                            <img
                                :data-src="item.tuser.avatar"
                                style="width:45px;height:45px;border-radius: 50%;vertical-align:middle"
                            />
                           <span style="margin-left: 5px;">admin</span>
                           <i style="margin-left: 20px;" class="el-icon-date"><span style="font-size: 18px;"> {{item.createTime}}</span></i>
                           <i style="margin-left: 20px;" class="el-icon-view"><span style="font-size: 18px;"> {{item.views}}</span></i>
                           <i style="margin-left: 20px;" class="el-icon-chat-line-square"><span style="font-size: 18px;"> {{item.commentCount}}</span></i>
                          </div>

                       </div>
                     </el-col>
                     <el-col :span="7">
                       <div v-lazy-container="{ selector: 'img' }">
<!--                         <el-image -->
<!--                           style="width: 100%; height: 100%"-->
<!--                           :src="item.firstPicture" -->
<!--                           >-->
<!--                         </el-image>-->
                         <img
                             style="width: 200px; height: 115px"
                             :data-src="item.firstPicture"
                         />
                         <div style="margin-bottom: 10px;">
                           <el-tag style="margin-right: 10px;" ><span> {{item.flag}}</span></el-tag>
                           <el-tag style="margin-right: 10px;" type="success"><span > {{item.ttype.name}}</span></el-tag>
                           <el-tag style="margin-right: 10px;" type="info" v-for="tag in item.tblogTags"><span> {{tag.ttag.name}}</span></el-tag>
                          
                         </div>
                       </div>
                     </el-col>
                   </el-row>
                   
                 </el-card>
                </div>
<!--                </router-link>-->

                 <el-divider></el-divider>      

                </div>

                <div style="margin-left: 2%;padding-bottom: 2%;">
                    <!-- 分页 -->
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="size"
                    layout="total, prev, pager, next"
                    :total="total"
                    :key="key">
                    </el-pagination>
                </div>
             </div>
            </div>
        </div>

      <Foot></Foot>
  </div>
</template>

<script>
import Head from '@/components/Head'
import Foot from '@/components/Foot'
export default {
  name: 'BlogType',
  components:{ Head,Foot },
  data () {
   return {
     types:[],
     type_id:'',
     blogData:[],
     total:1,
     currentPage:1,
     size:5,
     source:"type",
     page:1,
     idChange: false,
     key:0,
     loading: true
   }
  },
  mounted() {
    this.getAllType()
    this.initBlog()
    this.key = this.$store.getters.getTypeVal
  },
  methods:{
    //查询所有分类
    getAllType(){
        const _this = this
        this.axios.get('/type/getAllType').then(resp=>{
          _this.types = resp.data.obj
          if(this.$store.getters.getTypeId == ''){ //第一次进入
            this.changeTypeIdFun(resp.data.obj[0].id) //首次进入显示第一个分类的数据
          }
          // console.log(this.$store.getters.getTypeId)
        })
    },
    //获取分类数据
    getType(id){
      // console.log(id)
      this.type_id = id
      this.changeTypeIdFun(id)
      this.idChange = true //id发生了更改
      this.initBlog()
    },

    //初始化博客数据
    initBlog(){
      const _this = this

      // console.log(this.idChange)
      if(!this.idChange){ //还是原来的分类
        this.page = this.$store.getters.getTypeVal //没改变分类请求原来的页码
        this.currentPage = this.$store.getters.getTypeVal //当前页也返回原来页码
        // console.log(this.page,this.currentPage)
      }else{ //分类发生了改变
        this.page = 1
        this.currentPage = 1
        this.changeTypeValFun(this.page)
      }

      this.axios.get('/blog/vuefindByPage?current=' + this.page + '&size=' + this.size + '&type_id=' + this.$store.getters.getTypeId + '&source=' + this.source).then(resp=>{
        // console.log("初始化")
        // console.log(resp)
        _this.blogData = resp.data.obj.blogList
        _this.total = resp.data.obj.totals
        // console.log(resp.data.obj.totals)
        this.idChange = false //初始化完就变回false
        this.loading = false
      })
    },

    goToBlog(id){
      this.$router.push('/blog/'+id)
      this.changeSourceFun("type")
    },

    // 翻页后滚动条回到页面顶端
    scrollTop(selector) {
      let element = selector && document.querySelector(selector) || window;
      element.scrollTo(0, 0);
    },

    //分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      const _this = this
      this.loading = true
      this.axios.get('/blog/vuefindByPage?current=' + val + '&size=' + this.size + '&type_id=' + this.$store.getters.getTypeId + '&source=' + this.source).then(resp=>{
        // console.log(resp)
        this.loading = false
        _this.blogData = resp.data.obj.blogList
        // _this.total = resp.data.obj.totals



        //找到你想要滚到顶部的元素scrollTop=0
        this.scrollTop(".wrapper");

        //将分类转栏中的页码传到store中
        this.changeTypeValFun(val)
      })
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },

  //  改变store中typeVal的值
    changeTypeValFun(val){
      this.$store.dispatch("changeTypeValFun",val)
    },

    // 改变store中source的值
    changeSourceFun(source){
      this.$store.dispatch("changeSourceFun",source)
    },

    //  改变store中typeId的值
    changeTypeIdFun(id){
      this.$store.dispatch("changeTypeIdFun",id)
    },
  }
}
</script>

<style scoped>
    .blog_bg{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        width: 60%;
        margin-top: 5% !important;
        margin-bottom: 5% !important;
        margin: auto;
        min-height: 500px;
    }

    @media screen and (max-width: 800px){
      .blog_bg{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        width: 90%;
        margin-top: 5% !important;
        margin-bottom: 5% !important;
        margin: auto;
        min-height: 500px;
      }
    }
</style>